<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #369;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            color: #fff;
            user-select: none;
            cursor: pointer;
        }
    </style>
   
</head>

<body>
    <ul id="tree"></ul>

    <script>
        var tree = [
            {
                name: 'IT-互联网',
                children: [
                    {
                        name: 'Java开发',
                        children: [
                            {
                                name: 'Java进阶',
                                children: []
                            },
                            {
                                name: 'Java零基础',
                                children: []
                            },
                        ]
                    },
                    {
                        name: '前端开发',
                        children: [
                            {
                                name: '0基础就业课',
                                children: []
                            },
                            {
                                name: '实战进阶课',
                                children: []
                            },

                        ]
                    },
                    {
                        name: '移动开发',
                        children: [
                            {
                                name: 'Android开发',
                                children: []
                            },
                            {
                                name: 'IOS开发',
                                children: []
                            },
                        ]
                    },
                    {
                        name: '游戏开发',
                        children: [
                            {
                                name: 'Unity3d游戏',
                                children: []
                            },
                            {
                                name: 'OpenGL开发',
                                children: []
                            },
                        ]
                    },
                ]
            },
            {
                name: '设计-创作',
                children: [
                    { name: '平面设计', children: [
                        {
                            name: 'ue4',
                            children: []
                        }
                    ] },
                    { name: '绘画创作', children: [
                        {
                            name: 'u3d',
                            children: []
                        }
                    ] },
                    { name: '工业产品设计', children: [] },
                    { name: 'UI设计', children: [] },
                ]
            }
        ];
    
        for (var i = 0; i < tree.length; i++) {
            var fragment = document.createDocumentFragment();
            a(tree[i], fragment);
            document.getElementById('tree').appendChild(fragment);
        };
        var spans = document.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
            spans[i].addEventListener('click', unfold);
        }

        function a(element, fragment) {
            var li = document.createElement('li');
            var symbolHtml = '<span>-</span>' + element.name;
            li.innerHTML = symbolHtml;
            fragment.appendChild(li);
            var ul = document.createElement('ul');
            for (var i = 0; i < element.children.length; i++) {
                a(element.children[i], ul);
            }
            fragment.appendChild(ul);
        }

        function unfold() {
            this.parentNode.nextSibling.style.display = (this.parentNode.nextSibling.style.display == 'none') ? "block" : 'none';
            this.innerHTML = (this.innerHTML == '-') ? '+' : '-';
        }
    </script>
</body>

</html>